<div class="item">
  <div class="horizontal y-center">
    <div class="flexible">
      <h1>{{item.title}}</h1>
      <div class="horizontal y-center">
        <!--<span>DEBUG : </span>
        <button class="button" ><span class="content" data-action="start">Start loading</span></button>
        <button class="button" data-action="add" disabled><span class="content">Add waveform track</span></button>
        <button class="button" data-action="add_new_waveform" disabled><span class="content">Add waveform track v2</span></button>
        <button class="button" data-action="play" disabled><span class="content">Play</span></button>-->
      </div>
    </div>
    <div data-layout="player_container"></div>
  </div>
  <div>
      
  </div>
  <div class="navigation-track"></div>
  <ul data-layout="header" class="tabs">
    <li>
      <button class="button" data-layout="select_tab" data-target="infos">
        <span class="content">Informations</span>  
      </button>
    </li>
    <li class="active">
      <button class="button" data-layout="work" data-target="work">
        <span class="content">Annotations / Analyses</span>  
      </button>
    </li> 
    <li class="sub-tabs">
      <ul class="horizontal x-end">
        <li>
          <button class="button" data-layout="add_annotation" data-action="add_annot" disabled>
            <span class="content">+ Annotation</span>  
          </button>
        </li>
        <li>
          <button class="button" data-layout="add_analyse" data-action="add_anal" disabled>
            <span class="content">+ Analyse</span>  
          </button>
        </li> 
      </ul>
    </li>
  </ul>
  
  <div class="tracks">
    <div data-layout="ruler_container"></div>
    <div class="other-tracks"></div>  
    <div class="overlay-container" data-layout="overlay-container">
  </div>

  
  </div>
</div>